<template>
<div>
  <!-- <h2 class="subTitles">数据配置</h2> -->
  <!--<div class="crumbs">
      <el-breadcrumb separator="/">
          <el-breadcrumb-item><i class="el-icon-setting"></i> 系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.meta.displayName}}</el-breadcrumb-item>
      </el-breadcrumb>
  </div>-->
  <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
      <el-col :span="14">
        <template>
          <el-select v-model="dataSelectModel"   @change = "selectChange" ref="dataSelectModel"  placeholder="数据类别">
            <el-option
              v-for="item in dataClassify"
              :label="item.label"
              :value="item.value"
              :key="item.id">
            </el-option>
          </el-select>
        </template>
        <el-button-group>
          <el-button type="primary" icon="plus" @click="addClick()"></el-button>
        </el-button-group>
      </el-col>
      <el-col :span="10" >
        <el-input v-model="input" placeholder="请输入关键字" style="float:right;width:300px" size='small' icon="search" @change="inputChangeAction"></el-input>
      </el-col>
  </el-row>
  <el-table :data="tableData" height='600' style="width: 100%">
    <!-- <el-table-column
        type="index"
        label=""
        width="50">
      </el-table-column> -->
    <el-table-column type="expand">
      <template scope="props">
          <el-form label-position="left"  class="demo-table-expand">
            <el-form-item label="取数字符串：">
              <span>{{ props.row.valStr }}</span>
            </el-form-item>
            <el-form-item label="参数：">
              <span>{{ props.row.valType }}</span>
            </el-form-item>
            <el-form-item>
              <el-table :data='props.row.showItem' height='180' style="width: 75%">
                <el-table-column property="key" label="键值" width="350"></el-table-column>
                <el-table-column property="remark" label="说明" ></el-table-column>
              </el-table>
              </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="数据编号"
        prop="dsNo">
    </el-table-column>

      <el-table-column
        label="数据名称"
        prop="dsName">
      </el-table-column>
      <el-table-column
        label="数据类型"
        prop="dsType">
      </el-table-column>
      <el-table-column
        label="取值方法"
        prop="valMethod">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
          <template scope="scope">
            <el-button-group>
              <el-button @click.native.prevent="editClick(scope.$index,tableData)" icon="edit" type="primary" size="small">
              </el-button>
              <el-button @click="deleteClick(scope.$index,tableData)" icon="delete" type="primary" size="small"></el-button>
            </el-button-group>
        </template>
      </el-table-column>
</el-table>
<el-dialog title="键值信息" v-model="dialogItemVisible">
  <el-form :model="itemForm"  ref="itemForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="说明" prop="remark">
      <el-input v-model="itemForm.remark"></el-input>
    </el-form-item>
  </el-form>
</el-dialog>
    <el-dialog title="数据信息" v-model="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="操作">
          <el-button type="success" @click="testConn('ruleForm')" size="small">测试解析数据</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" size="small">保存</el-button>
          <el-button @click="dialogFormVisible = false" size="small">取消</el-button>
        </el-form-item>
        <el-form-item label="数据类别" prop="classify" >
          <el-select v-model="ruleForm.classify"  placeholder="请选择数据类别">
            <el-option
              v-for="item in dataClassify"
              :label="item.label"
              :value="item.value"
              :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据编号" prop="dsNo"  placeholder="不可包含下划线">
          <el-input v-model="ruleForm.dsNo"></el-input>
        </el-form-item>
        <el-form-item label="数据名称" prop="dsName">
          <el-input v-model="ruleForm.dsName"></el-input>
        </el-form-item>
        <el-form-item label="数据类型" prop="dsType">
          <el-select v-model="ruleForm.dsType" placeholder="请选择数据类型">
            <el-option label="url" value="url"></el-option>
            <el-option label="sql" value="sql"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="取值方法" prop="valMethod">
          <el-select v-model="ruleForm.valMethod" placeholder="【url】数据请选择取值方法">
            <el-option label="" value=""></el-option>
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入参" prop="valType" placeholder="json格式">
          <el-input type="textarea" v-model="ruleForm.valType"  :rows="1"></el-input>
        </el-form-item>
        <el-form-item label="取值字符串" prop="valStr" placeholder="参数值以#{key}表示，key必须在入参中定义和设置默认值">
          <el-input type="textarea" v-model="ruleForm.valStr"  :rows="5"></el-input>
        </el-form-item>
      <el-form-item>
        <el-table :data="itemData" height='200'>
          <el-table-column property="key" label="键值" width="150"></el-table-column>
          <el-table-column property="remark" width="205" label="说明" ></el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
              <template scope="scope">
                  <el-button-group>
                    <el-button type="primary" icon="edit" @click.native.prevent="editItem(scope.$index,itemData)"></el-button>
                    <el-button type="primary" icon="delete" @click="deleteItem(scope.$index,itemData)"></el-button>
                  </el-button-group>
              </template>
          </el-table-column>
        </el-table>
    </el-form-item>

      </el-form>
    </el-dialog>
  </div>


</template>

<script>
import ReportService from 'api/report/reportMgm'
import ResTypeEnum from 'common/resTypeEnum'
export default {
  components: {},
  data: function() {
    return {
      dataClassify:[],//数据类别
      dataSelectModel:'',
      input:"",
      tableData: [],
      itemData: [],
      dialogFormVisible: false,
      dialogItemVisible: false,
      itemForm: {},
      ruleForm: {},
      rules: {
          dsNo: [{
            required: true,
            message: '请输入数据编号',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 265,
            message: '长度在 3 到 265 个字符',
            trigger: 'blur'
          }
        ],
        dsName: [{
            required: true,
            message: '请输入数据名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 265,
            message: '长度在 3 到 265 个字符',
            trigger: 'blur'
          }
        ],
        dsType: [{
          required: true,
          message: '请选择数据类型',
          trigger: 'change'
        }],
        valStr: [{
            required: true,
            message: '请输入sql/url信息',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 4000,
            message: '长度在 3 到 4000 个字符',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed:{
    // dataClassify :function(){
    //
    //   if (this.dataSelectModel == ''){
    //     this.dataSelectModel = ResTypeEnum.getAllDataClassify()[0].value;
    //   }
    //   return ResTypeEnum.getAllDataClassify();
    // }
  },
  methods: {
    addClick() {
      this.ruleForm = {
        classify:'',
        dsName: '',
        dsType: 'sql',
        valMethod: '',
        valStr: '',
        dsNo:'',
        valType:'{}'
      };
      this.itemData = [];
      this.dialogFormVisible = true;
    },
    editClick(index, rows) {

      this.ruleForm = rows[index];
      this.itemData = this.decodeParams(rows[index]["params"]);
      this.dialogFormVisible = true;
    },
    deleteClick(index, row) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ReportService.deleteDs(row[index]["id"]).then((response) => {
          // this.queryData();
          this.queryDataByClassify(this.dataSelectModel);
        }).catch((err) =>{
            console.error(err);
        });
      });
    },
    editItem(index, rows) {
      this.itemForm = rows[index];
      this.dialogItemVisible = true;
    },
    deleteItem(index, rows) {
      var newRow = [];
      if (index < 0) {
        newRow = rows;
      } else {
        newRow = rows.slice(0, index).concat(rows.slice(index + 1, rows.length));
      }
      this.itemData = newRow;
    },
    //
    queryDataByClassify(classify){
      var params ={
        classify:classify
      };
      ReportService.queryDataByClassify(params).then((response) => {
        var data = response.data;
        for(var i=0;i<data.length;i++){
            data[i]["showItem"] = this.decodeParams(data[i]["params"]);
        };
        this.tableData = data;
      }).catch((err) =>{
          console.error(err);
      });
    },
    submitForm() {
      var form = this.ruleForm;
      form.params = this.encodeParams(); //序列号键值信息
      ReportService.saveDs(form).then((response) => {
        this.dialogFormVisible = false;
        this.$message({
          showClose: true,
          message: '保存成功！'
        });
        this.queryDataByClassify(this.dataSelectModel);
      }).catch((response) => {
        this.$message({
          showClose: true,
          message: '保存失败！'
        });
      });
    },
    selectChange(val){
      this.queryDataByClassify(val);
    },
    testConn() {
      ReportService.testDs(this.ruleForm).then((response) => {
        this.$alert(response.data, '测试结果', {
          confirmButtonText: '确定',
          callback: action => {
            this.setItem(response.data);
          }
        });
      }).catch((err) =>{
          console.error(err);
      });
    },
    setItem(itemObj) {
      if (itemObj.length) {
        itemObj = itemObj[0];
      }
      var data = [];
      for (var item in itemObj) {
        data.push({
          key: item,
          remark: item
        });
      }
      this.itemData = data;
    },
    encodeParams(obj){
      return JSON.stringify({
        rowdata: {
          total: this.itemData.length,
          rows: this.itemData
        },
        rows: this.itemData
      })
    },
    decodeParams(str){
      return eval("(" + str + ")")["rowdata"]["rows"];
    },
    inputChangeAction() {
      var filterData = [];
      var self = this;
      if (this.input == '') {
        this.queryData();
      } else {
        this.tableData = this.tableData.filter(function(v) {
          //遍历行值，如果存在返回该行
          var result = false;
          for (var col in v) {
            if ((""+v[col]+"").indexOf(self.input)>=0) {
              result = true;
            }
          }
          return result;
        });
      }
    }
  },
  mounted: function() {
    this.dataClassify = ResTypeEnum.getAllDataClassify();
    this.dataSelectModel = this.dataClassify[0].value;
  }
}
</script>


<style>

</style>
